<template>
  <a-modal
    v-model:visible="$visible"
    :on-before-ok="handleOnBeforeOk"
    @ok="handleOk"
    @cancel="handleCancel"
    @before-close="$visible = false"
    @close="handleClose"
  >
    <template #title> {{ modalTitle }} </template>
    <div style="display: flex; align-items: center">
      <div style="margin-right: 10px">
        <component :is="icon.name" v-bind="icon"></component>
      </div>
      {{ msg }}
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';

  const props = defineProps({
    modalTitle: {
      type: String,
      default: '提示',
    },
    icon: {
      type: Object,
      default: () => {
        return {
          name: 'icon-exclamation-circle-fill',
          style: 'color: #FF7D00;font-size:32px;',
        };
      },
    },
    msg: {
      type: String,
      default: '确定删除数据吗？',
    },
    visible: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: 'del',
    },
  });
  const $visible = ref(false);
  const emit = defineEmits(['update:visible', 'modalOk']);
  watch(
    () => props.visible,
    (val) => {
      if (val) {
        $visible.value = val as any;
      }
    },
    {
      immediate: true,
      deep: true,
    }
  );
  const handleOk = async () => {
    // emit('modalOk');
  };
  const handleCancel = async () => {
    $visible.value = false;
    emit('update:visible', false);
  };
  const handleClose = async () => {
    $visible.value = false;
    emit('update:visible', false);
  };
  const handleOnBeforeOk = (done: (closed: boolean) => void) => {
    emit('modalOk', {
      type: props.type,
      ck: ({ closed }: { closed: boolean }) => {
        done(closed);
      },
    });
  };
</script>

<style></style>
